<template>
	<view>
		<view class="flex align-center justify-end mr-5">
			<!-- 下拉列表 -->
			<!-- <uni-section title="本地数据" type="line">
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</uni-section> -->
			<span class="mx-2">共{{total}}页</span>
			<!-- 上一页  下一页 -->
			<view class="flex align-center">
				<button @click="previousPage" :disabled="active3==0" style="width: 10px; height: 30px;"
					class="flex align-center justify-center">
					<uni-icons :color="(active3==0?'gray':'black')" type="left"></uni-icons>
				</button>
				<span :class="(active3==index?'getPages':'bgc')+' mx-2 text-center' " @click="getPages(index)"
					style=" line-height: 30px; width: 30px; height: 30px;" v-for="(item,index) in total"
					:key="index">{{index+1}}</span>
				<button @click="nextPage" :disabled="active3==total-1" style="width: 10px; height: 30px;"
					class="flex align-center justify-center">
					<uni-icons :color="(active3==total-1?'gray':'black')" type="right"></uni-icons> </button>
			</view>
			<!-- 前往 xx 页 -->
			<view class="ml-3 flex align-center justify-center">
				<span>前往</span>
				<input class="border rounded text-center mx-2" style="width: 40px;" type="text" @input="input"
					v-model="active4">
				<span>页</span>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "Pager",
		data() {
			return {
				obj: {
					Enterprise_Info_SerialNumber: "",
					Article_Name: "",
					page: 1,
					limit: 8,
					Type: 0,
					Category_SerialNumber: ""
				},
				goodsList: [],
				active4:0,
				active3:0,
			};
		},
		props: {
			total: {
				type:Number,
				default:0
			},
			limit: {// 传过来的总数
				type: String,
				default:"0"
			}, 
			getPage:{
				type:Function,
			}
		},
		methods:{
			previousPage(){
				this.active3--
				this.active4 = this.active3 + 1
				this.obj.page--
			},
			nextPage() {
				this.active3++
				this.active4 = this.active3 + 1
				this.obj.page++
				this.getData(this.obj)
			},
			input(e) {
				if (e.detail.value != '') {
					this.active3 = e.detail.value - 1
					this.obj.page = e.detail.value
				}
			},
			getPages(index) {
				if(this.obj.page==index + 1){
					return
				}
				this.active3 = index;
				this.active4 = this.active3 + 1
				this.obj.page = index + 1
			},
			getData(data) {
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: app.globalData.Domain_Name+'/sv/getGroupProcureAll',
					method: "POST",
					data,
					success: (res) => {
						console.log(res.data);
						this.goodsList = res.data.tableData
						console.log(this.goodsList);
						this.limit = res.data.limit
						if(this.limit % this.obj.limit!=0){
							this.total = Math.floor(this.limit / this.obj.limit) + 1
						}else{
							this.total = Math.floor(this.limit / this.obj.limit)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.bgc {
		background-color: #ffffff;
		cursor: pointer;
	}
	.getPages {
		background-color: #fc7c08;
		color: #fff;
	}
</style>